<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:发布订阅者模式</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<p><strong>观察着模式： 又被称作发布订阅者模式或者消息机制，定义了一种依赖关系，解决主题对象（被观察者，被监听对象）主题对象（被观察者，被监听对象）与观察者之间功能的耦合。</strong></p>
<h1 id="-">团队开发中的坎坷</h1>
<p>场景一：在新闻评论模块中，当用户发布评论时。评论展示的模块末尾处追加新的评论，与此同时消息模块的消息数量也会递增。删除评论时，消息模块的消息数量会递减。。。。假设这个时候这三个模块是其他三个同时写的。并且写在了自己独立闭包模块里。此时我想完成我的需求而不把他们的模块合并到一起。</p>
<h1 id="-">创建一个观察者</h1>
<p><strong>1.创建</strong></p>
<pre><code class="lang-javascript">//将观察者放到闭包里面。页面加载立即执行
var Observer = (function () {
    var _messages = {};
    return {
        //注册信息
        regise: function() {},
        //发布信息
        fire:function() {},
        //移除信息
        remove:function() {},
    }
})()
</code></pre>
<p><strong>2.注册信息regise方法作用：将订阅者的注册的消息推入到消息队列中，接受两个参数：消息类型和相应的处理动作。</strong></p>
<blockquote>
<p>在消息推入之前先判断此消息是否存在。
不存在：创建一个该消息类型并将该消息放进消息队列中。
存在：则将消息执行方法推入该消息的对应的方法队列中。目的保证多个模块注册同一个消息时能顺利进行</p>
</blockquote>
<pre><code class="lang-javascript">regist: function(type,fn){
    if(typeof messages[type] === &#39;undefined&#39;){
    //创建一个该消息类型并将该消息放进消息队列中
        _messages[type] = [fn]
    }else{
    //将消息执行方法推入该消息的对应的方法队列中
        _messages[type].push(fn)
    }
}
</code></pre>
<p><strong>3.发布信息fire方法作用：当观察者发布一个消息时将所有订阅者订阅的消息一次执行。接收两个参数：消息类型和动作执行时需要传递的参数（消息类型为必传项）。将消息类别以及传递的参数打包依次传入消息执行方法中</strong></p>
<blockquote>
<p>在执行消息动作队列之前先判断此消息是否存在。
不存在：return。
存在：遍历消息执行方法队列。并依次执行</p>
</blockquote>
<pre><code class="lang-javascript">fire:function (type,args){
    if(!_messages[type]) return
    var events = {
        type: type,
        args: args || []
    }
    for(let i = 0; i &lt; _messages[type].length; i++) {
        _messages[type][i].call(this,events)
    }
}
</code></pre>
<p><strong>4.移除信息remove方法作用：将订阅者注销的消息从消息队列中清除，接收两个参数：消息类型和执行的某一个动作</strong></p>
<blockquote>
<p>在删除消息动作之前需要先判断此消息动作是否存在。</p>
</blockquote>
<pre><code class="lang-javascript">remove: function(type,fn){
    if(_messages[type] instanceof Array){
        for(let i =_messages[type].length ; i &gt;= 0;  i--){
            _messages[type][i] == fn &amp;&amp; _messages[type].splice(i,1)
        }
    }
}
</code></pre>
<h1 id="-">使用</h1>
<pre><code class="lang-javascript">//订阅
observer.regist(&#39;test&#39;, function(e){
    consle.log(e.type,e.args.msg)
} )
//发布
observer.fire(&#39;test&#39;,{msg: &#39;传递参数&#39;})
//打印：test 传递参数
</code></pre>
<blockquote>
<p><a href="https://www.cnblogs.com/canfoo/p/6891868.html">https://www.cnblogs.com/canfoo/p/6891868.html</a></p>
</blockquote>
<blockquote>
<p><a href="https://github.com/DDFE/DDFE-blog/issues/7">https://github.com/DDFE/DDFE-blog/issues/7</a></p>
</blockquote>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>